<template>


  <div class="ele-body ele-body-card">
    <el-row :gutter="15">
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="getIndexData"
        @submit.native.prevent>

      </el-form>
    </el-row>
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">


      <el-col :lg="6" :md="6">
        <router-link to="/team/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">直推商家统计</div>
              <el-tooltip content="直推商家统计" placement="top">
                <i
                  class="el-icon-_question ele-text-placeholder"
                  style="cursor: pointer;">
                </i>
              </el-tooltip>
            </div>
            <div class="analysis-chart-card-num" v-html="roomTotal"></div>
            <el-divider/>

          </el-card>
        </router-link>
        <router-link to="/team/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">直推商家收益统计</div>
              <el-tooltip content="直推商家收益统计" placement="top">
                <i
                  class="el-icon-_question ele-text-placeholder"
                  style="cursor: pointer;">
                </i>
              </el-tooltip>
            </div>
            <div class="analysis-chart-card-num" v-html="totalPrice"></div>
            <el-divider/>

          </el-card>
        </router-link>
      </el-col>

      <el-col :lg="6" :md="6">
        <router-link to="/one/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">二级推荐商家统计</div>
              <el-tooltip content="二级推荐商家统计" placement="top">
                <i
                  class="el-icon-_question ele-text-placeholder"
                  style="cursor: pointer;">
                </i>
              </el-tooltip>
            </div>
            <div class="analysis-chart-card-num" v-html="second"></div>
            <el-divider/>

          </el-card>
        </router-link>
        <router-link to="/one/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">二级推荐商家收益统计</div>
              <el-tooltip content="二级推荐商家统计" placement="top">
                <i
                  class="el-icon-_question ele-text-placeholder"
                  style="cursor: pointer;">
                </i>
              </el-tooltip>
            </div>
            <div class="analysis-chart-card-num" v-html="secondPrice"></div>
            <el-divider/>

          </el-card>
        </router-link>
      </el-col>

      <el-col :lg="6" :md="6">
        <router-link to="/two/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">三级推荐商家统计</div>
              <el-tooltip content="三级推荐商家统计" placement="top">
                <i
                  class="el-icon-_question ele-text-placeholder"
                  style="cursor: pointer;">
                </i>
              </el-tooltip>
            </div>
            <div class="analysis-chart-card-num" v-html="level"></div>
            <el-divider/>

          </el-card>
        </router-link>
        <router-link to="/two/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">三级推荐商家收益统计</div>
              <el-tooltip content="三级推荐商家统计" placement="top">
                <i
                  class="el-icon-_question ele-text-placeholder"
                  style="cursor: pointer;">
                </i>
              </el-tooltip>
            </div>
            <div class="analysis-chart-card-num" v-html="levelPrice"></div>
            <el-divider/>

          </el-card>
        </router-link>
      </el-col>
      <el-col :lg="6" :md="6">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">店铺总收益</div>
          </div>
          <div class="analysis-chart-card-num" v-html="shopprice"></div>

        </el-card>

        <router-link to="/profit/index" class="app-link-block">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">团队总收益</div>

            </div>
            <div class="analysis-chart-card-num" v-html="teamprice"></div>
          </el-card>
        </router-link>
      </el-col>

    </el-row>
    <el-row :gutter="15">

      <router-link to="/order/order" class="app-link-block">
        <el-col :lg="6" :md="6">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">今日收益</div>
            </div>
            <div class="analysis-chart-card-num" v-html="rieshopprice"></div>

          </el-card>

          <router-link to="/profit/index" class="app-link-block">
            <el-card class="analysis-chart-card" shadow="never">
              <div slot="header" class="ele-cell">
                <div class="ele-cell-content">本月</div>

              </div>
              <div class="analysis-chart-card-num" v-html="yueshopprice"></div>
            </el-card>
            <el-card class="analysis-chart-card" shadow="never">
              <div slot="header" class="ele-cell">
                <div class="ele-cell-content">累计</div>
              </div>
              <div class="analysis-chart-card-num" v-html="zoeshopprice"></div>
            </el-card>
          </router-link>
        </el-col>
      </router-link>
      <router-link to="/order/order" class="app-link-block">
        <el-col :lg="6" :md="6">
          <el-card class="analysis-chart-card" shadow="never">
            <div slot="header" class="ele-cell">
              <div class="ele-cell-content">成功订单</div>
            </div>
            <div class="analysis-chart-card-num" v-html="order_ri"></div>

          </el-card>

          <router-link to="/profit/index" class="app-link-block">
            <el-card class="analysis-chart-card" shadow="never">
              <div slot="header" class="ele-cell">
                <div class="ele-cell-content">本月</div>

              </div>
              <div class="analysis-chart-card-num" v-html="order_yue"></div>
            </el-card>
            <el-card class="analysis-chart-card" shadow="never">
              <div slot="header" class="ele-cell">
                <div class="ele-cell-content">累计</div>

              </div>
              <div class="analysis-chart-card-num" v-html="order_tount"></div>
            </el-card>
          </router-link>
        </el-col>
      </router-link>
    </el-row>
  </div>
</template>

<script>

import EleChart from 'ele-admin/packages/ele-chart';
import EleWordCloud from 'ele-admin/packages/ele-word-cloud';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart, EleWordCloud},
  data() {
    return {
      // 支付笔数
      second: 0,
      roomTotal: 0,
      level: 0,
      price: 0,
      totalPrice: 0,
      secondPrice: 0,
      levelPrice: 0,
      add_time: 0,
      end_time: 0,
      shopprice: 0,
      teamprice: 0,
      rieshopprice: 0,
      yueshopprice: 0,
      zoeshopprice: 0,
      order_ri: 0,
      order_yue: 0,
      order_tount: 0,
    };
  },

  mounted() {
    this.getIndexData();
  },
  methods: {
    /* 获取支付笔数数据 */

    getIndexData() {
      this.$http.get('/index/Statistics').then(res => {
        if (res.data.code === 0) {
          this.roomTotal = res.data.data.self_room;
          this.second = res.data.data.second;
          this.level = res.data.data.level;
          this.totalPrice = res.data.data.totalPrice;
          this.secondPrice = res.data.data.secondPrice;
          this.levelPrice = res.data.data.levelPrice;
          this.shopprice = res.data.data.shopprice;
          this.teamprice = res.data.data.teamprice;
          this.rieshopprice = res.data.data.rieshopprice;
          this.yueshopprice = res.data.data.yueshopprice;
          this.zoeshopprice = res.data.data.zoeshopprice;
          this.order_ri = res.data.data.order_ri;
          this.order_yue = res.data.data.order_yue;
          this.order_tount = res.data.data.order_tount;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },


  },

}

</script>

<style scoped>
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
